<template>
	<view class="homeLayout">
		<view class="banner">
			<swiper :circular="swiperConfig.circular" :indicator-active-color="swiperConfig.indicatorActiveColor" :indicator-color="swiperConfig.indicatorColor" :indicator-dots="swiperConfig.indicatorDots"
				:autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration">
				<swiper-item >
					<image src="../../common/images/banner1.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
						<image src="../../common/images/banner2.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
						<image src="../../common/images/banner3.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="notice">
			<div class="icon" >
				<uni-icons type="sound-filled" size="20" color="#27b289"></uni-icons>
			</div>
			<swiper autoplay :interval="2000" :duration="1000"   circular >
				<swiper-item>
				测试公告测试公告测试公告测试公告测试公告测试公告测试公告1
				</swiper-item>
				<swiper-item>
				测试公告测试公告测试公告测试公告测试公告测试公告测试公告2
				</swiper-item>
				<swiper-item>
				测试公告测试公告测试公告测试公告测试公告测试公告测试公告3
				</swiper-item>
			</swiper>
			<div class="icon">
				<uni-icons type="right" size="20" color="#acacac"></uni-icons>
			</div>
		</view>
	
		<common-title class="recommend">
			<template #title>每日推荐</template>
			<template #custom>
				<view class="box">
					<uni-icons type="calendar-filled" size="20" color="#20a77c"></uni-icons>
					<view><uni-dateformat :date="+new Date()" format="MM月dd号"></uni-dateformat></view>
				</view>
			</template>
		</common-title>
		<view class="recommend-list">
			<scroll-view class="scroll-view_H" direction="horizontal" scroll-x="true"  >
				<view class="scroll-view-item_H">
					<image src="../../common/images/classify2.jpg" mode="aspectFill"></image>
				</view>
				<view class="scroll-view-item_H">
					<image src="../../common/images/classify1.jpg" mode="aspectFill"></image>
				</view>
				<view class="scroll-view-item_H">
					<image src="../../common/images/preview_small.webp" mode="aspectFill"></image>
				</view>
				<view class="scroll-view-item_H">
					<image src="../../common/images/preview2.jpg" mode="aspectFill"></image>
				</view>
				<view class="scroll-view-item_H">
					<image src="../../common/images/preview2.jpg" mode="aspectFill"></image>
				</view>
				
			</scroll-view>
		</view>
		<common-title>
			<template #title>专题精选</template>
			<template #custom>
				<view class="box">
					<view>More+</view>
				</view>
			</template>
		</common-title>
		
		<view class="selected">
			<common-item v-for="i in 8"></common-item>
					<common-item isMore></common-item>
		</view>
		
	</view>
</template>

<script setup>
	
	import {
		reactive
	} from 'vue';

	const swiperConfig = reactive({
		indicatorDots: true,
		autoplay: false,
		interval: 2000,
		duration: 500,
		indicatorColor:'rgba(255,255,255,0.5)',
		indicatorActiveColor:'rgba(255,255,255,1)',
		circular:true
		
	})
</script>

<style scoped lang="scss">
	.banner {
		width: 750rpx;
		height: 340rpx;
		swiper {
			width: 100%;
			height: 100%;
			swiper-item {
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
    .notice {
		width: 690rpx;
		height: 78rpx;
		margin: 20rpx auto;
		background-color: rgba(48, 188, 146,0.1);
		border-radius: 39rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		
		swiper {
			width: 100%;
			height: 100%;
			swiper-item {
				padding: 0 12rpx;
				line-height: 78rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #5d5d5d;
				font-size: 26rpx;
				box-sizing: border-box;
			
			}
		}
	}
	.recommend {
			
		.box {
			display: flex;
			align-items: center;
			color: #20a77c;
		}
	}	
	.recommend-list {
		width: 720rpx;
		height: 445rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
	
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 200rpx;
			height: 445rpx;
			margin-right: 15rpx;
			border-radius: 8rpx;
			overflow: hidden;
			image {
				width: 100%;
				width: 100%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			
		}
			
		.scroll-view-item_H:last-child {
			margin-right: 30rpx;
		}
			
	}

	.selected {
		padding: 0 30rpx 50rpx 30rpx;
		display: grid;
		grid-template-columns: repeat(3,auto);
		gap: 15rpx;
		// margin-bottom: 50rpx;
	}
</style>